<template>
  <!-- <v-flop :number="number"></v-flop> -->

  <v-flop-wrap :number="current"/>

  {{current}}
  
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import vFlop from "./components/Flop.vue";
import vFlopWrap from './components/FlopWrap.vue'

export default defineComponent({
  name: "App",
  components: {
    vFlop,
    vFlopWrap
  },

  setup() {
    const current = ref(0);

    setInterval(() => {
      const res = [];

      for (let i = 0; i < 5; i++) {
        res.push(Math.floor(Math.random() * 10));
      }

      current.value = parseInt(res.join(""));
    }, 1500);


    const generateNumber = () => {
      return Math.floor(Math.random() * 10).toString();
    };
    const number = ref('0')
    setInterval(() => number.value = generateNumber(), 2000)

    return {
      current,
      number,
    };
  },
});
</script>